/**
 * 这里是uni-app内置的常用样式变量
 *
 * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
 * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
 *
 */

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

/* 颜色变量 */

/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

/* 背景颜色 */
$uni-bg-color: #ffffff;
$uni-bg-color-grey: #f8f8f8;
$uni-bg-color-hover: #f1f1f1; //点击状态颜色
$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色

/* 边框颜色 */
$uni-border-color: #c8c7cc;

/* 图片尺寸 */
$uni-img-size-sm: 40rpx;
$uni-img-size-base: 52rpx;
$uni-img-size-lg: 80rpx;

/* Border Radius */
$uni-border-radius-sm: 4rpx;
$uni-border-radius-base: 6rpx;
$uni-border-radius-lg: 12rpx;
$uni-border-radius-circle: 50%;

/* 水平间距 */
$uni-spacing-row-sm: 10rpx;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;

/* 垂直间距 */
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;

/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度

/* 文章场景相关 */
$uni-color-title: #2c405a; // 文章标题颜色
$uni-font-size-title: 40rpx;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle: 36rpx;
$uni-color-paragraph: #3f536e; // 文章段落颜色
$uni-font-size-paragraph: 30rpx;

//主色调，红色：#FF0036，绿色 #4CAF50，蓝色：#03A9F4，黄色：#FF9800，粉色：#FF547B，棕色：#C3A769，浅绿色：#65C4AA，黑色：#333333，紫色：#B323B4，淡粉色：#FF8B8B
$base-color: #FF0036;
//主色调 rgba  可用opacify函数改变alpha值  实例：opacify($base-color-rgba, 0.8);
$base-color-rgba: rgba(255, 0, 54, 0.1);

/* 尺寸变量 */

/* 文字尺寸 */
$ns-font-size-sm: 24rpx; //12
$ns-font-size-base: 28rpx; //14
$ns-font-size-lg: 32rpx; //16

// 小
.ns-font-size-sm {
	font-size: $ns-font-size-sm;
}
// 标准
.ns-font-size-base {
	font-size: $ns-font-size-base;
}
// 大
.ns-font-size-lg {
	font-size: $ns-font-size-lg;
}

/* 文字基本颜色 */
$ns-text-color-black: #333; //基本色
$ns-text-color-gray: #898989; //辅助灰色，如加载更多的提示信息

//文字颜色
.ns-text-color {
	color: $base-color !important;
}
.ns-text-color-black {
	color: $ns-text-color-black !important;
}
.ns-text-color-gray {
	color: $ns-text-color-gray !important;
}

//边框
$ns-border-color-gray: #e5e5e5;

.ns-border-color {
	border-color: $base-color !important;
}

.ns-border-color-gray {
	border-color: $ns-border-color-gray !important;
}

//背景色
$ns-bg-color-gray:  #e5e5e5;
.ns-bg-color {
	background-color: $base-color !important;
}

.ns-bg-color-gray {
	background-color: rgba(244,244,244,0) !important;
}

//内边距
$ns-padding: 20rpx;
.ns-padding {
	padding: $ns-padding !important;
	&-top {
		padding-top: $ns-padding !important;
	}
	&-right {
		padding-right: $ns-padding !important;
	}
	&-bottom {
		padding-bottom: $ns-padding !important;
	}
	&-left {
		padding-left: $ns-padding !important;
	}
}

//外边距
$ns-margin: 20rpx;
.ns-margin {
	margin: $ns-margin !important;
	&-top {
		margin-top: $ns-margin !important;
	}
	&-right {
		margin-right: $ns-margin !important;
	}
	&-bottom {
		margin-bottom: $ns-margin !important;
	}
	&-left {
		margin-left: $ns-margin !important;
	}
}

//圆角
$ns-border-radius: 4px;
.ns-border-radius {
	border-radius: $ns-border-radius !important;
}

//按钮
button {
	margin: 0 40rpx;
	border-radius: 4px;
	font-size: 32rpx;
	&[type='primary'] {
		background-color: $base-color !important;

		&.button-hover {
			background-color: darken($base-color, 5%) !important;
		}
		&[plain] {
			background-color: transparent !important;
			color: $base-color !important;
			border-color: $base-color !important;
		}
		&[disabled] {
			color: rgba(0, 0, 0, 0.2) !important;
			border-color: rgba(0, 0, 0, 0.2) !important;
		}
	}
}

// 复选框
uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
	color: $base-color !important;
}

// 开关

uni-switch .uni-switch-input.uni-switch-input-checked {
	background-color: $base-color !important;
	border-color: $base-color !important;
}

// 单选
uni-radio .uni-radio-input-checked {
	background-color: $base-color !important;
	border-color: $base-color !important;
}

// 滑块
uni-slider .uni-slider-track {
	background-color: $base-color !important;
}

// 输入框

view {
	font-size: $ns-font-size-base;
	color: $ns-text-color-black;
}

$page-color-base: #f8f8f8;
.page-bc-color {
	background: $page-color-base;
}

// Tag

.uni-tag--inverted {
	border-color: $ns-border-color-gray !important;
	color: $ns-text-color-black !important;
}

.uni-tag--primary {
	color: #fff !important;
	background-color: $base-color !important;
	border-color: $base-color !important;
}

.uni-tag--primary.uni-tag--inverted {
	color: $base-color !important;
	background-color: #fff !important;
	border-color: $base-color !important;
}

//会员中心积分背景板
.member-point .account-box {
	background: linear-gradient($base-color, lighten($base-color, 10%)) !important;
}

//会员中心余额背景板
.member-balance .account-box {
	background: linear-gradient($base-color, lighten($base-color, 10%)) !important;
}

// 按钮禁用背景色
$btn-disabled-color: #b7b7b7;
.btn-disabled-color {
	background: $btn-disabled-color;
}

//商品详情，优惠券弹出层，项
.product-coupon-popup-layer .coupon-body .item {
	background-color: lighten($base-color, 45%) !important;
	view {
		color: lighten($base-color, 10%) !important;
	}
}

// 商品详情,评价
.product-evaluation-main .product-evaluation-ul text,
.comments-popup-layer .filter text {
	background-color: lighten($base-color, 45%) !important;
	color: #5c5c5c !important;
}

.comments-popup-layer .filter text.selected {
	background-color: $base-color !important;
	color: #fff !important;
}

//商品详情-->>加入购物车
$color-add-cart: #ff9800;
.goods-detail-add-cart {
	background: $color-add-cart !important;
}

$color-add-cartB: #ee331b;
.goods-detail-add-cartB {
	background: $color-add-cartB !important;
}


// 商品已下架
.goods-detail-lower {
	background: #737373 !important;
}

// 商品详情，sku选中
.sku-layer .body-item .sku-list-wrap {
	.items {
		background-color: #f5f5f5 !important;
		&.selected {
			background-color: lighten($base-color, 45%) !important;
			color: $base-color !important;
			border-color: $base-color !important;
		}
		&.disabled {
			color: #898989 !important;
			cursor: not-allowed !important;
			pointer-events: none !important;
			opacity: 0.5 !important;
			box-shadow: none !important;
			filter: grayscale(100%);
		}
	}
}

// 商品详情，数量加减
.sku-layer .body-item .number-wrap .number {
	button,
	input {
		border-color: rgba(229, 229, 229, 0.5) !important;
		background-color: rgba(229, 229, 229, 0.4) !important;
	}
}

// 商品详情，限时折扣、拼团
.goods-detail .product-discount,
.goods-detail .promotion-pintuan {
	background: linear-gradient(to bottom, #fef391, #fbe253);
	.price-info {
		background: linear-gradient(to right, $base-color, lighten($base-color, 10%)) !important;
	}
}

// 砍价，拼团专区
.bargain-explain .group .group-list,
.body .step .step-con {
	background-color: lighten($base-color, 45%) !important;
}
//自定义组件·公告

.diy-notice .flag {
	background: lighten($base-color, 45%);
}

//推广我的店铺三角
.goods-list .sale-num .triangle{
	border-color: transparent darken($base-color, 15%);
}

//分类商品
.category-side-nav .side-nav-item.nav-select{
	// background: #f5f5f5;
	background: #33CC33;
}
.category-box .category-condition{
	border-bottom: 10px solid #f5f5f5;
}
.screen-wrap scroll-view .item-wrap .label {
	background: #f5f5f5;
}

//会员中心等级背景
.member-container .user-section .member-sign{
	background-color: #ffd200;
}

//订单详情
.detail-container {
	.info-wrap {
		.i-head{
			border-bottom: 1px solid #f5f5f5;
		}
		.i-body{
			.goods-list .order-goods-item {
				border-top: 1px dashed #e5e5e5;
			}
			.goods-list .text{
				color: #999;
			}
		}
	}
}
.time-line .time-item .time-divider {
	background: #e5e5e5;
}
.shipping-time-wrapper .time-list view,.invoice-wrapper .invoice-form .form-item .f-cont {
	background: #f5f5f5;
}
